<template>
  <div class="home-page">
    <div class="total-data">
      <p class="p-title">今日数据</p>
      <ul>
        <li v-for="(item, index) in dataList" :key="index">
          <p>{{ (index === 3 ? MoneyUnit(item.value) : item.value) || 0 }}</p>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <div class="sketch_map">
      <div class="tab_list">
        <ul>
          <li
            v-for="(item, index) in tabList"
            :key="index"
            :class="[{ active: item.show }]"
            @click="changeTab(item)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div class="echart_list">
        <div class="echart_item">
          <p class="title">用户访问趋势</p>
          <p class="title">访问用户数{{ info.count }} 次</p>
          <div ref="visitEchart" class="full-size"></div>
          <el-button
            type="success"
            class="exportBtn"
            plain
            @click="exportUserVisit"
          >导出</el-button>
        </div>
        <div class="echart_item">
          <p class="title">订单转换漏斗</p>
          <p class="title">总转化率{{ info.rate }}%</p>
          <div ref="convertEchart" class="full-size"></div>
          <el-button
            type="success"
            class="exportBtn"
            plain
            @click="exportOrderConvert"
          >导出</el-button>
        </div>
        <div class="echart_item">
          <p class="title">热卖商品</p>
          <ul v-if="info.hotSellProducts && info.hotSellProducts.length">
            <li v-for="(item, index) in info.hotSellProducts" :key="index">
              <p>{{ index + 1 }}</p>
              <p :title="item.productName">{{ item.productName }}</p>
              <p>{{ `已售 ${item.number} 件` }}</p>
            </li>
          </ul>
          <div v-else class="empty">
            <img :src="empty" alt />
            <p>暂无数据</p>
          </div>
          <el-button
            type="success"
            class="exportBtn"
            plain
            @click="exportHotProducts"
          >导出</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue'
import * as echarts from 'echarts'
import empty from '@/assets/images/empty.png'
import {
  dashIndex,
  userVisitExport,
  orderConvertExport,
  hotProductsExport,
} from '@/api/dashboard'

const visitEchart = ref(null)
const convertEchart = ref(null)
const form = ref({
  condition: 1
})
const dataList = ref([
  { name: '店铺访问次数 (次)', value: '', field: 'total' },
  { name: '待处理订单 (件)', value: '', field: 'stayOrders' },
  { name: '售后订单 (件)', value: '', field: 'stayAfters' },
  { name: '成交金额 (万元)', value: '', field: 'money' }
])
const tabList = ref([
  { name: '最近30天', type: 4, date: '30' },
  { name: '最近7天', type: 3, date: '7' },
  { name: '昨天', type: 2, date: '1' },
  { name: '今天', type: 1, show: true, date: '0' }
])
const info = ref({})
const date = ref('0')
const orderData = ref({})

onBeforeMount(() => {
  getTotalData()
})

const getTotalData = async () => {
  const res = await dashIndex(form.value)
  if (res.code === '') {
    const d = res.data
    // 小于100元，单位为 元
    if (d.money < 10000) {
      dataList.value[3].name = '成交金额 (元)'
    }
    dataList.value.map((item) => {
      item.value = d[item.field]
    })
    draw(res.data.visitWeek)
    draws(res.data.conversion)
    info.value = d
  }
}
const turnTime = (v) => {
  const t = v.split('-')
  return `${Number(t[1])}/${Number(t[2])}`
}
const changeTab = (v) => {
  tabList.value.map((item) => {
    item.show = item.date === v.date
  })
  form.value.condition = v.type
  date.value = v.date
  getTotalData()
}
// 导出用户访问数据
const exportUserVisit = async () => {
  ElMessage({
    message: '数据导出中，请勿重复操作！',
    type: 'success',
  })
  const res = await userVisitExport(form.value)
  if (!res) {
    return
  }
  doExportFile(res, '用户访问数据')
}
// 导出订单统计数据
const exportOrderConvert = async () => {
  ElMessage({
    message: '数据导出中，请勿重复操作！',
    type: 'success',
  })
  const res = await orderConvertExport(form.value)
  if (!res) {
    return
  }
  doExportFile(res, '订单统计数据')
}
// 导出热卖商品数据
const exportHotProducts = async () => {
  ElMessage({
    message: '数据导出中，请勿重复操作！',
    type: 'success',
  })
  const res = await hotProductsExport(form.value)
  if (!res) {
    return
  }
  doExportFile(res, '热卖商品数据')
}
const doExportFile = (res, fileName) => {
  const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
  if ('download' in document.createElement('a')) {
    // 非IE下载
    const elink = document.createElement('a')
    elink.download = fileName
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href) // 释放URL 对象
    document.body.removeChild(elink)
  } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName)
  }
}
const draw = (arr) => {
  const myEchart = echarts.init(visitEchart.value, 'light')
  const option = {
    xAxis: {
      type: 'category',
      data: arr.time,
    },
    yAxis: {
      type: 'value',
      name: '次数',
    },
    series: [
      {
        data: arr.total,
        type: 'line',
      },
    ],
  }
  myEchart.setOption(option)
}
const draws = (arr) => {
  const myEchart = echarts.init(convertEchart.value, 'light')
  // const o = this.chartData
  const option = {
    // color: ["#74d1fd", "#009ae4", "#0071c1"],
    // 设置图表的位置
    grid: {
      x: 110, // 左间距
      y: 0, // 上间距
      x2: 60, // 右间距
      y2: 40, // 下间距
    },
    // 提示框组件
    tooltip: {
      trigger: 'axis', // 触发类型, axis: 坐标轴触发
      axisPointer: {
        // 指示器类型  'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器
        // 'cross' 十字准星指示器 其实是种简写，表示启用两个正交的轴的 axisPointer
        type: 'none',
      },
      textStyle: {
        color: '#cdd3ee', // 文字颜色
      },
      // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式 折线（区域）图、柱状（条形）图、K线图
      // {a}（系列名称），{b}（类目值），{c}（数值）, {d}（无）
      formatter: '{b}<br />{a0}: {c0}%',
    },
    // // 图例组件
    // legend: {
    //   textStyle: {
    //     // 文本样式
    //     fontSize: 16,
    //     color: "#cdd3ee"
    //   },
    //   top: 13, // 定位
    //   data: ["已完成", "进行中", "未完成"] // 图例的数据数组
    // },
    // X轴
    xAxis: {
      type: 'value', // 坐标轴类型,   'value' 数值轴，适用于连续数据
      // 坐标轴刻度
      axisTick: {
        show: false, // 是否显示坐标轴刻度 默认显示
      },
      // 坐标轴轴线
      axisLine: {
        // 是否显示坐标轴轴线 默认显示
        show: false, // 是否显示坐标轴轴线 默认显示
      },
      // 坐标轴在图表区域中的分隔线
      splitLine: {
        show: false, // 是否显示分隔线。默认数值轴显示
      },
      // 坐标轴刻度标签
      axisLabel: {
        show: false, // 是否显示刻度标签 默认显示
      },
    },
    yAxis: [
      // 左侧Y轴
      {
        // 坐标轴类型,  'category' 类目轴，适用于离散的类目数据
        // 为该类型时必须通过 data 设置类目数据
        type: 'category',
        // 坐标轴刻度
        axisTick: {
          show: false, // 是否显示坐标轴刻度 默认显示
        },
        // 坐标轴轴线
        axisLine: {
          // 是否显示坐标轴轴线 默认显示
          show: false, // 是否显示坐标轴轴线 默认显示
          lineStyle: {
            // 坐标轴线线的颜色
            color: '#cdd3ee',
          },
        },
        // 坐标轴在图表区域中的分隔线
        splitLine: {
          show: false, // 是否显示分隔线。默认数值轴显示
        },
        // 坐标轴刻度标签
        axisLabel: {
          show: true, // 是否显示刻度标签 默认显示
          fontSize: 16, // 文字的字体大小
          color: '#cdd3ee', // 刻度标签文字的颜色
          // 使用字符串模板，模板变量为刻度默认标签 {value}
          formatter: '{value}',
        },
        // 类目数据，在类目轴（type: 'category'）中有效
        data: arr.names.reverse(),
      },
    ],
    // 系列列表
    series: [
      {
        type: 'bar', // 系列类型
        name: '已完成',
        barMaxWidth: 20, // 柱条的最大宽度，不设时自适应
        // label: {
        //   show: true,
        //   position: "inside"
        // },
        itemStyle: {
          barBorderRadius: [10, 0, 0, 10], // 圆角半径, 单位px, 支持传入数组分别指定 4 个圆角半径
        },
        data: arr.rates.reverse(), // 系列中的数据内容数组
      },
    ],
  }
  myEchart.setOption(option)
}
const MoneyUnit = (v) => {
  if (!v) return 0
  if (v < 10000) {
    return v.toFixed(2)
  } else {
    return (v / 10000).toFixed(2)
  }
}
</script>

<style lang="scss" scoped>
ul {
  list-style: none;
}
.home-page {
  height: 100%;
  .total-data {
    .p-title {
      padding-left: 20px;
      font-size: 24px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 50px;
      height: 50px;
      margin: 0;
    }
    ul {
      overflow: hidden;
      display: flex;
      padding: 0;
      li {
        padding: 0;
        box-sizing: border-box;
        flex: 4;
        width: 400px;
        height: 140px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(224, 229, 235, 1);
        border-radius: 4px;
        margin: 20px;
        p {
          margin: 0;
          height: 70px;
          line-height: 70px;
          text-align: center;
          &:nth-child(1) {
            font-size: 48px;
            font-weight: 600;
          }
          &:nth-child(2) {
            font-size: 18px;
          }
        }
        &:nth-child(1) {
          p:nth-child(1) {
            color: #1acda1;
          }
        }
        &:nth-child(2) {
          p:nth-child(1) {
            color: #ffae11;
          }
        }
        &:nth-child(3) {
          p:nth-child(1) {
            color: #ff7911;
          }
        }
        &:nth-child(4) {
          p:nth-child(1) {
            color: #3a68f2;
          }
        }
      }
    }
  }

  .sketch_map {
    height: calc(100% - 260px);
    box-sizing: border-box;
    background: #fff;
    padding: 0 20px;
    .tab_list {
      border-bottom: 1px solid #e0e5eb;
      overflow: hidden;
      margin-bottom: 20px;
      ul {
        overflow: hidden;
        float: right;
        width: 60%;
        padding: 0;
        margin: 0;
        li {
          padding: 0 20px;
          margin: 0;
          float: right;
          height: 60px;
          line-height: 60px;
          color: #999999;
          font-size: 18px;
          &:hover {
            cursor: pointer;
          }
          &:nth-child(1) {
            padding-right: 0;
          }
        }
        .active {
          color: #3a68f2;
          border-bottom: 3px solid #3a68f2;
        }
      }
    }
    .echart_list {
      height: calc(100% - 100px);
      .echart_item {
        position: relative;
        padding-left: 20px;
        box-sizing: border-box;
        height: calc(100% - 30px);
        width: calc((100% - 40px) / 3);
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(224, 229, 235, 1);
        box-shadow: 0px 5px 10px 0px rgba(51, 51, 51, 0.15);
        border-radius: 4px;
        float: left;
        .echart {
          height: calc(100% - 100px);
        }
        &:nth-child(-n + 2) {
          margin-right: 20px;
        }
        .title {
          margin: 0;
          height: 50px;
          line-height: 50px;
          font-size: 18px;
          color: #333333;
          &:nth-child(2) {
            text-align: center;
            color: #3a68f2;
            font-size: 14px;
          }
        }
        ul {
          height: calc(100% - 50px);
          margin: 0;
          padding: 0;
          li {
            height: 10%;
            display: flex;
            margin-bottom: 20px;
            p {
              float: left;
              // text-align: center;
              text-indent: 2em;
              padding: 0;
              margin: 0;
              color: #333333;
              font-size: 14px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              &:nth-child(1) {
                flex: 2;
              }
              &:nth-child(2) {
                flex: 6;
              }
              &:nth-child(3) {
                flex: 4;
              }
            }
          }
        }
        .exportBtn {
          position: absolute;
          right: 10px;
          top: 10px;
        }
      }
    }
  }
}
.empty {
  height: 450px;
  img {
    width: 80px;
    height: 80px;
    margin: 100px auto 10px;
    display: block;
  }
  p {
    text-align: center;
    color: #333333;
  }
}
.full-size {
  height: 500px;
}
</style>
